<template>
  <div>
      <el-form :model="searchForm" inline label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="searchForm.categoryName" clearable placeholder="分类名称"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable placeholder="选择状态">
            <el-option label="可用" :value="1"/>
            <el-option label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList">搜索</el-button>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="primary" size="mini" @click="openDialog()">添加</el-button>
      </div>
      <el-table :data="dataList" border>
        <el-table-column prop="categoryId" label="编号" align="center"/>
        <el-table-column prop="categoryName" label="广告名称" align="center"/>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="changeStatus(scope.row.categoryId,2)">可用</el-button>
            <el-button v-else size="mini" type="danger" @click="changeStatus(scope.row.categoryId,1)">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDialog(scope.row.categoryId)">修改</el-button>
            <el-button size="mini" @click="deleteInfo(scope.row.categoryId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <category-update ref="categoryUpdate" @closeDialog="getDataList"/>
  </div>
</template>

<script>
import CategoryUpdate from '@/views/admin/category/CategoryUpdate.vue'

const initData = {
  categoryName: '',
  categoryId: '',
  status: ''
}
export default {
  name: 'CategoryList',
  components: { CategoryUpdate },
  data () {
    return {
      searchForm: {
        ...initData
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      dataList: []
    }
  },
  methods: {
    getDataList () {
      this.$http.get('category/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.getDataList()
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.getDataList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.pageInfo = {
        page: 1,
        limit: 5,
        total: 0
      }
      this.getDataList()
    },
    changeStatus (categoryId, status) {
      this.$confirm(`确定更改编号<span style="font-weight: bold;color: #66b1ff">[${categoryId}]</span>的状态为${status === 1 ? '<span style="color: green;font-weight: bold;">可用</span>' : '<span style="color: red;font-weight: bold;">禁用</span>'}吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.post('category/status', { categoryId, status }).then(() => {
          this.$message.success('更新状态成功')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    deleteInfo (categoryId) {
      this.$confirm(`确定删除编号<span style="font-weight: bold;color: #66b1ff">[${categoryId}]</span>的数据吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.delete(`category/delete/${categoryId}`).then(() => {
          this.$message.success('删除成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    openDialog (categoryId) {
      this.$refs.categoryUpdate.init(categoryId)
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
